
/*
 * @Author: your name
 * @Date: 2020-05-14 10:31:50
 * @LastEditTime: 2020-10-30 15:28:33
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /yigo/src/Pages/OrderListScreen.js
 */
import React, { Component } from 'react'
import { View, Text ,Image, TouchableOpacity,StyleSheet, DeviceEventEmitter, TouchableOpacityBase} from 'react-native'
import { connect } from 'react-redux'
import SearchBar from 'react-native-material-design-searchbar';
import { 
    orderList,  
    acceptOrder,
    robOrder,
    getOrderFood, 
    finishOrder
 } from '../../Actions/OrderActions'
import CustomFlatList from '../../Utils/CustomFlatList'

class BusinessOrderListScreen extends Component {
    constructor(props) {
        super(props)
        
          this.state = {
            keywords:null,       //搜索关键字
            data:[]
        }
        this.page = 0;    // 默认第0页
    }
    componentWillMount() {
        let status = this.props.status;
        
        this.fetchList(status)
    }

    componentWillReceiveProps(nextProps) {
        if (this.props.status != nextProps.status) {
            this.fetchList(nextProps.status)

        }
    }

    fetchList(status) {
        this.props.orderList({status})
    }

    shouldComponentUpdate(nextProps, nextState) {
        if (this.props.isFetch && !nextProps.isFetch) {
            if (nextProps.code == 200) {
                let data = nextProps.data;
                // this.setState({data})
            }
        }
        return true
    }


    render() {
        let {isFetch, status, data} = this.props
                
        return (
            <View style={{flex:1}}>
                {data &&
                    <CustomFlatList 
                        renderItem={this._renderItem}
                        lookMoreClick={() => this.refreshData(true)}
                        data={data}>
                    </CustomFlatList>
                } 
            </View>
        )
    }

    lookMoreClick = () => {
    
    }

    onSearchChange(keywords) {        
        this.setState({keywords})
    }  
    hundleOnpress(type,orderId) {
        if (type === 1) {
            //商家接单
            this.props.acceptOrder({orderId})            
        } else if (type === 2) {
            //骑手抢单
            this.props.robOrder({orderId})                        
        } else if (type === 3) {
            //骑手领餐操作
            this.props.getOrderFood({orderId})                        
        } else if (type === 4) {
            //已完成配送
            this.props.finishOrder({orderId})
        }
    }

    _renderItem = ({item,index}) => {
        console.log("订单信息:",item);
        return (

            <View style={{backgroundColor:'#F8F8F8',height:184}}>
            <View style={{backgroundColor:'#dcdcdc',height:1}}></View>
            <Text>{item.userName}</Text>
            <Text>{item.userPhone}</Text>
            <Text>{`${item.orderPrice}元`}</Text>
            {item.status === 1 &&  //商家接单操作
                <TouchableOpacity onPress={this.hundleOnpress.bind(this,1,item.orderId)} style={{justifyContent:'center', alignItems:'center', width:100,height:30}}>
                    <Text>一键接单</Text>
                </TouchableOpacity>
            }

            {userInfo.userType === 2 && item.status === 2 &&  //骑手抢单操作
                <TouchableOpacity onPress={this.hundleOnpress.bind(this,2,item.orderId)} style={{justifyContent:'center', alignItems:'center', width:100,height:30}}>
                    <Text>一键抢单</Text>
                </TouchableOpacity>
            }

            {userInfo.userType === 2 && item.status === 3 &&  //骑手领餐操作
                <TouchableOpacity onPress={this.hundleOnpress.bind(this,3,item.orderId)} style={{justifyContent:'center', alignItems:'center', width:100,height:30}}>
                    <Text>一键取餐</Text>
                </TouchableOpacity>
            }

            {userInfo.userType === 2 && item.status === 4 &&  //骑手领餐操作
                <TouchableOpacity onPress={this.hundleOnpress.bind(this,4,item.orderId)} style={{justifyContent:'center', alignItems:'center', width:100,height:30}}>
                    <Text>已完成配送</Text>
                </TouchableOpacity>
            }
        </View>
            
            )
        
     }
    _keyExtractor = (item, index) => item.id;

}

const mapStateToProps = (state) => {
    let { isFetch, code, data, msg} = state.Order.orderList || '';    
    
    return { 
        isFetch, code, data, msg
            } 
}

const mapDispatchToProps = (dispatch, ownProps) => {
    return {
        orderList: (paramter)=> dispatch(orderList(paramter)),
        acceptOrder: (paramter)=> dispatch(acceptOrder(paramter)),
        robOrder: (paramter)=> dispatch(robOrder(paramter)),
        getOrderFood: (paramter)=> dispatch(getOrderFood(paramter)),
        finishOrder: (paramter)=> dispatch(finishOrder(paramter)),

        
    }
}

const styles = StyleSheet.create({
    textStyle:{
        marginTop:3,
        marginBottom:3,
        color:'#404040'
    }
  });

export default connect(mapStateToProps,mapDispatchToProps)(BusinessOrderListScreen)
